<template>
  <div class="xMiner-api-list">
    <el-select
      ref="selector"
      v-model="curApiCode"
      filterable
      :placeholder="$demoi18n('word.plsSelect')"
      size="default"
      :class="`panel-data-select-${xvueTheme}`"
      :popper-class="popperClass"
      @visible-change="visibleChange"
      @input="filterInput"
    >
      <el-option-group
        v-for="(group) in apiListTree"
        :key="group.id"
        :label="group.name"
        :class="getGroupClass(group)"
        @click="clickGroup(group)"
      >
        <el-option
          v-for="(item, j) in group.children"
          :key="j"
          :label="item.name"
          :value="item.code"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>
<script>
import { formatTreeData } from '@/utils/util.js';
export default {
  components: {},
  props: {
    apiList: Array,
    value: String,
  },
  emits: ['update:value', 'change', 'visible-change'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      popperClass: `xMiner-api-list_popper select-poper-${window._adoPremise.uc.theme || 'light'}`,
      curApiCode: this.value,
      curApiName: '',
      curGroupCode: '',
      searchStr: '', // 输入搜索框中的文字
    };
  },
  computed: {
    apiListTree() {
      if (!this.apiList) {
        return [];
      }
      const tree = formatTreeData(this.apiList, {
        name: 'code',
        parent: 'treeParentCode',
        children: 'children',
      });
      return tree;
    },
  },
  watch: {
    apiList(newVal, oldVal) {
      if (oldVal && oldVal.length) {
        this.curApiCode = '';
        this.curGroupCode = '';
      }
    },
    value(newVal) {
      this.curApiCode = newVal;
    },
    curApiCode(newVal, oldVal) {
      if (newVal !== this.value) {
        this.$emit('update:value', newVal);
        this.$emit('change', newVal);
      }
      const item = this.apiList.find(n => n.code === newVal);
      this.curApiName = item ? item.name : '';
    },
  },
  methods: {
    clickGroup(group) {
      if (group.code === this.curGroupCode) {
        this.curGroupCode = '';
      } else {
        this.curGroupCode = group.code;
      }
    },
    isOptionShow(item) {
      return item.treeParentCode === this.curGroupCode;
    },
    getGroupClass(group) {
      let className = '';
      if (this.searchStr || group.code === this.curGroupCode) {
        className = 'visible';
      }
      return className;
    },
    visibleChange(val) {
      if (val === false) {
        this.curGroupCode = '';
      } else {
        this.searchStr = '';
        if (this.curApiCode) {
          const value = this.curApiCode;
          const item = this.apiList.find(n => n.code === value);
          if (item) {
            this.curGroupCode = item.treeParentCode;
          }
        }
      }
      this.$emit('visible-change');
    },
    filterInput() {
      const searchStr = this.$refs.selector.$data.selectedLabel;
      this.searchStr = searchStr;
    },
  },
};
</script>
<style lang="less" scoped>
.xMiner-api-list{
  flex: 1;
}
</style>
<style lang="less">
.xMiner-api-list_popper {
  .el-select-group__title {
    cursor: pointer;
  }
  .el-select-dropdown__item {
    padding-left: 40px;
  }
  .el-select-dropdown__wrap {
    max-height: 400px;
  }
  .el-select-group__wrap {
    .el-select-dropdown__item {
      display: none;
      height: 28px;
      line-height: 28px;
    }
    &.visible {
      .el-select-dropdown__item {
        display: block;
      }
    }
    &:not(:last-of-type) {
      padding-bottom: 10px;
      &::after {
        bottom: 5px;
      }
    }
  }
}
</style>

